<template>
  <div class="custom-menu-container" >
    <div class="custom-menu-bar" style="color: var( --color-text);">
      <div v-for="item in menuListRight" :key="item.key" class="custom-menu-item"
        :class="{ selected: current === item.key }" @click="handleItemClick(item)"     :style="{ color: current === item.key ? 'var(--color-Sel)' : 'inherit' }">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
    current: {
        type: String,
        default: ''
    }
});

const emits = defineEmits(['itemClick']);

const router = useRouter();

const menuListRight = ref([
  { key: 'Recommended', label: '推荐' },
  { key: 'follow', label: '关注' }
]);

const handleItemClick = (item) => {
    emits('itemClick', item.key);
    console.log(item.key);
    router.push(`/Recommended/${item.key}`);
};
</script>

<style scoped>
.custom-menu-container {

  overflow: hidden;
}

.custom-menu-bar {
  display: flex;
  white-space: nowrap;
  padding: 0 0.8vw;
  background-color: transparent;
}

.custom-menu-item {
  padding: 0 1vw; 
  height: 2.08vw;
  line-height: 2.08vw;
  cursor: pointer;
  font-size: 0.83vw;
  position: relative;
  flex-shrink: 0;


  text-align: center;

}
</style>